<template>
	<coreshop-page title="售后详情" mode="left">
		<view class="layout-aftersales-box">
			<!-- 状态图标 -->
			<view class="status-box"
				v-if="state.aftersalesInfo?.status == AftersalesStatusEnum.approvedReview && state.aftersalesInfo?.billRefund?.status == AftersalesBillRefundStatusEnum.success">
				<view class="icon-box">
					<uv-icon name="checkmark-circle-fill" color="#5ac725" size="60"></uv-icon>
				</view>
				<view class="title">退款成功</view>
			</view>
			<view class="status-box" v-if="state.aftersalesInfo?.status == AftersalesStatusEnum.rejectedReview">
				<view class="icon-box">
					<uv-icon class="icon" name="close-circle-fill" color="#D33123" size="60"></uv-icon>
				</view>
				<view class="title">申请驳回</view>
				<view class="desc">驳回原因: {{state.aftersalesInfo?.mark || '暂无'}}</view>
			</view>

			<!-- 退款单状态 -->
			<view class="content-box">
				<view class="title">售后单进度</view>
				<view class="order-box">
					<view class="item-box">
						<view class="lab">售后单状态</view>
						<view class="val">{{ state.statusName }}</view>
					</view>
					<view class="item-box" v-if="state.reshipName">
						<view class="lab">退货单状态</view>
						<view class="val">{{ state.reshipName }}</view>
					</view>
					<view class="item-box" v-if="state.refundName">
						<view class="lab">退款单状态</view>
						<view class="val">{{ state.refundName }}</view>
					</view>
				</view>
			</view>

			<!-- 物流信息 -->
			<view class="content-box"
				v-if="state.aftersalesInfo?.status == AftersalesStatusEnum.approvedReview && state.aftersalesInfo?.billReship?.status == AftersalesBillReshipStatusEnum.awaiting && state.aftersalesInfo?.billRefund?.status != AftersalesBillRefundStatusEnum.success">
				<view class="title">退货邮寄信息</view>
				<view class="logistics-box">
					<view class="tit">收货人：{{ state.reshipInfo?.reshipName }} {{ state.reshipInfo?.reshipMobile }}</view>
					<view class="desc">{{ state.reshipInfo?.reshipArea }} {{ state.reshipInfo?.reshipAddress }}</view>
				</view>
			</view>

			<!-- 商品信息 -->
			<view class="content-box" v-if="state.aftersalesInfo?.items?.length > 0">
				<view class="title">商品信息</view>
				<view class="goods-box">
					<view class="item-box" v-for="item, index in state.aftersalesInfo?.items" :key="index">
						<coreshop-goods-card type="horizontal" imgHeight="140rpx" imgWidth="140rpx"
							:goodsData="hanldeCombinationGoodsData(item)">
							<template #goodPrice>
								<view class="order-num">
									<view class="number">售后单号：{{ item.aftersalesId }}</view>
									<view class="quantity">退货数量：{{ item.nums }}</view>
								</view>
							</template>
						</coreshop-goods-card>
					</view>
				</view>
			</view>

			<!-- 商品状态 -->
			<view class="content-box">
				<view class="title">商品状态</view>
				<view class="order-box">
					<view class="item-box">
						<view class="lab">是否收到货</view>
						<view class="val">{{ state.typeName }}</view>
					</view>
					<view class="item-box">
						<view class="lab">退款金额</view>
						<view class="val price">￥{{ state.aftersalesInfo.refundAmount }}</view>
					</view>
					<view class="item-box">
						<view class="lab"></view>
						<view class="val">
							<uv-button type="primary" openType="contact" bindcontact="showChat" size="small"
								text="联系客服"></uv-button>
						</view>
					</view>
				</view>
			</view>

			<!-- 图片凭证 -->
			<view class="content-box" v-if="state.aftersalesInfo?.images?.length > 0">
				<view class="title">图片凭证</view>
				<view class="img-box m-t-30">
					<uv-album :urls="state.aftersalesInfo?.images" keyName="imageUrl" multipleSize="140rpx"></uv-album>
				</view>
			</view>

			<!-- 问题描述 -->
			<view class="content-box">
				<view class="title">问题描述</view>
				<view class="reason-box">
					<view class="reason" v-if="state.aftersalesInfo?.reason">{{ state.aftersalesInfo?.reason }}</view>
					<view class="reason" v-else>暂无描述</view>
				</view>
			</view>

			<!-- 回邮商品物流信息 -->
			<view class="content-box"
				v-if="state.aftersalesInfo?.status == AftersalesStatusEnum.approvedReview && state.aftersalesInfo?.billReship?.status == AftersalesBillReshipStatusEnum.awaiting">
				<view class="title">请填写回邮商品物流信息</view>
				<view class="logistics-goods">
					<view class="item">
						<view class="lab">快递公司</view>
						<view>
							<uv-input placeholder="请填写快递公司名称" border="surround" v-model="state.logiCode"></uv-input>
						</view>
					</view>
					<view class="item">
						<view class="lab">物流单号</view>
						<view>
							<uv-input placeholder="请填写物流单号" border="surround" v-model="state.logiNo"></uv-input>
						</view>
					</view>
				</view>
			</view>

			<!-- 快递公司 -->
			<view class="content-box"
				v-if="state.aftersalesInfo?.status == AftersalesStatusEnum.approvedReview && state.aftersalesInfo?.billReship?.status > AftersalesBillReshipStatusEnum.awaiting">
				<view class="title">快递信息</view>
				<view class="order-box">
					<view class="item-box">
						<view class="lab">快递公司</view>
						<view class="val">{{ state.logiCode }}</view>
					</view>
					<view class="item-box">
						<view class="lab">物流单号</view>
						<view class="val">
							<text class="m-r-10">{{ state.logiNo }} </text>
							<uv-tags @click="handleCopyLogiNo" text="复制" plain size="mini" type="success"></uv-tags>
						</view>
					</view>
				</view>
			</view>

			<!-- 底部按钮 -->
			<view class="btn-box"
				v-if="state.aftersalesInfo?.status == AftersalesStatusEnum.approvedReview && state.aftersalesInfo?.billReship?.status == AftersalesBillReshipStatusEnum.awaiting">
				<view class="btn-padding">
					<view class="btn" @click="handleSubmit">提交</view>
				</view>
			</view>
			<view class="btn-box" v-if="isShowAgainApplyAftersalesBtn">
				<view class="btn-padding">
					<view class="btn" @click="handleAgainApply">再次申请售后</view>
				</view>
			</view>

		</view>
	</coreshop-page>
</template>
<script setup lang="ts">
	import { reactive, computed } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { queryAftersalesInfo, querySendReship } from '@/core/api';
	import type { Response } from '@/core/models';
	import { handleShowToast } from '@/core/utils';
	import { AftersalesStatusEnum, AftersalesTypeEnum, OrderStatusEnum, AftersalesBillRefundStatusEnum, AftersalesBillReshipStatusEnum } from '@/core/enum';

	interface QueryParams {
		id : string;
	}

	const state = reactive<{
		id : string;
		aftersalesInfo : any;
		reshipInfo : any;
		statusName : string;
		refundName : string;
		reshipName : string;
		typeName : string;
		logiCode : string;
		logiNo : string;
		submitStatus : boolean;
	}>({
		id: "",
		aftersalesInfo: {},
		reshipInfo: {},
		statusName: "审核中",
		refundName: "",
		reshipName: "",
		typeName: "",
		logiCode: "",
		logiNo: "",
		submitStatus: false,
	})

	/** 是否显示再次申请售后按钮 */
	const isShowAgainApplyAftersalesBtn = computed(() => {
		return (
			state.aftersalesInfo?.order?.status == OrderStatusEnum.pending &&
			state.aftersalesInfo?.status == AftersalesStatusEnum.approvedReview &&
			state.aftersalesInfo?.billRefund?.status != AftersalesBillRefundStatusEnum.error &&
			state.aftersalesInfo?.billRefund?.status != 0
		) || (
				state.aftersalesInfo?.order?.status == OrderStatusEnum.pending &&
				state.aftersalesInfo?.status == AftersalesStatusEnum.approvedReview &&
				state.aftersalesInfo?.billReship?.status == AftersalesBillReshipStatusEnum.received
			)
	})

	onLoad((query : QueryParams) => {
		state.id = query.id;
		getAftersalesInfo();
	});

	/** 获取售后单详情 */
	const getAftersalesInfo = async () => {
		const aftersalesInfo : Response<any> = await queryAftersalesInfo({ id: state.id });
		if (aftersalesInfo.status) {
			state.aftersalesInfo = aftersalesInfo.data?.info;
			state.reshipInfo = aftersalesInfo.data?.reship;

			if (state.aftersalesInfo?.type == AftersalesTypeEnum.no) {
				state.typeName = '未收货';
			} else {
				state.typeName = '已收货';
			}

			if (state.aftersalesInfo?.status == AftersalesStatusEnum.pendingReview) {
				state.statusName = '审核中';
			} else if (state.aftersalesInfo?.status == AftersalesStatusEnum.approvedReview) {
				state.statusName = '申请通过';

				/** 退款单状态 */
				if (state.aftersalesInfo?.billRefund?.status == AftersalesBillRefundStatusEnum.error) {
					state.refundName = '未退款';
				} else if (state.aftersalesInfo?.billRefund?.status == AftersalesBillRefundStatusEnum.success) {
					state.refundName = '退款成功';
				}

				/** 退货单状态 */
				if (state.aftersalesInfo?.billReship?.status == AftersalesBillReshipStatusEnum.awaiting) {
					state.reshipName = '待发退货';
				} else if (state.aftersalesInfo?.billReship?.status == AftersalesBillReshipStatusEnum.pending) {
					state.reshipName = '待收退货';
					state.logiNo = state.aftersalesInfo?.billReship?.logiNo;
					state.logiCode = state.aftersalesInfo?.billReship?.logiCode;
				} else {
					state.reshipName = '已收退货';
					state.logiNo = state.aftersalesInfo?.billReship?.logiNo;
					state.logiCode = state.aftersalesInfo?.billReship?.logiCode;
				}

			} else {
				state.statusName = '申请驳回';
			}

		} else {
			handleShowToast(aftersalesInfo.msg)
		}
	}


	/** 组合商品数据传入组件 */
	const hanldeCombinationGoodsData = (item : any) => {
		return {
			id: item.id,
			image: item.imageUrl,
			name: item.name,
			brief: item.addon,
		}
	}

	/** 复制物流单号 */
	const handleCopyLogiNo = () => {
		uni.setClipboardData({
			data: state.logiNo,
			success: function () {
				handleShowToast('复制成功')
			}
		});
	}

	/** 提交 */
	const handleSubmit = async () => {
		if (state.submitStatus) {
			return;
		}
		if (!state.logiNo) {
			handleShowToast('请输入退货快递信息');
			return;
		}
		state.submitStatus = true;
		const reship : Response<any> = await querySendReship({
			logiNo: state.logiNo,
			logiCode: state.logiCode,
			reshipId: state.aftersalesInfo?.billReship?.reshipId,
		});
		if (reship.status) {
			handleShowToast('提交成功', 'success', () => {
				state.submitStatus = false;
				setTimeout(() => {
					uni.navigateBack();
				}, 1500);
			});
		} else {
			state.submitStatus = false;
			handleShowToast(reship.msg);
		}
	}

	/** 再次申请售后 */
	const handleAgainApply = () => {

	}
</script>
<style lang="scss" scoped>
	@import './detail.scss';
</style>